<template>
    <el-dialog :title="appData.title" v-model="appDialog" width="800" :before-close="handleClose">
        <el-form :model="appForm" ref="appRef" :rules="appRules" label-width="120px">
            <el-form-item label="开票时间" prop="invoice_time">
                <el-date-picker v-model="appForm.invoice_time" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择"/>
            </el-form-item>
            <el-form-item label="发票号码" prop="invoice_number">
                <el-input v-model="appForm.invoice_number" placeholder="请输入发票号码"></el-input>
            </el-form-item>
            <el-form-item label="发票文件" prop="files">
                <UpFiles v-model:fileList="appForm.files" :fileData="fileData"></UpFiles>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button :loading="btnLoading" type="primary" @click="handleSubmit">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import UpFiles from '../../Common/AllUpLoad.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed, watch } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {UpFiles},
        props: {
            appDialog: {
                type: Boolean,
                default: ()=>{
                    return false
                }
            },
            appData: {
                type: Object,
                default: ()=> {
                    return {}
                }
            },
            editData: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        emits: ['update:appDialog', 'handleSubmit'],
        setup(props) {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                btnLoading: false,
                appRef: '',
                appForm: {
                    invoice_time: '',
                    invoice_number: '',
                },
                appRules: {
                    invoice_time: [
                        { required: true, message: '请选择开票时间', trigger: 'blur' }
                    ],
                },

                //上传文件
                fileData: {
                    action: proxy.PathUrl + '/index/Upload/file',
                    accept: '.jpg,.png,.pdf',
                    limit: 100,
                    size: 200,
                },

                //窗口
                appDialog: computed({
                    get: ()=>{
                        return props.appDialog
                    },
                    set: ()=>{
                        return props.appDialog
                    }
                }), 
            })

            //提交审批
            const handleSubmit = () => {
                let files = [];
                let array = state.appForm.files;
                for(let key in array){
                    if(array[key].response){
                        files.push(array[key].response.data.path)
                    }else{
                        files.push(array[key].url)
                    }
                }
                state.appRef.validate((valid) => {
                    if(valid){
                        state.btnLoading = true;
                        proxy.$http.post('/oa/Lawcase/opInvoice',{
                            id: props.appData.id,
                            status: 2,
                            invoice_time: String(state.appForm.invoice_time),
                            invoice_number: state.appForm.invoice_number,
                            files: String(files)
                        })
                        .then(res=> {
                            state.btnLoading = false;
                            let { code, msg, data } = res;
                            if(code != 1){
                                return proxy.$msg.error(msg);
                            }else{
                                proxy.$msg.success('提交成功!');
                                proxy.$emit('update:appDialog', false);
                                proxy.$emit('handleSubmit');
                                proxy.$refs.appRef.resetFields();
                            }
                        })
                    }
                })
            }

            //关闭审批
            const handleClose = () => {
                proxy.$emit('update:appDialog', false);
                proxy.$refs.appRef.resetFields();
            }
            
            //Dom加载
            onMounted(()=>{
                
            })

            //监听
            watch(props,(value)=> {
                if(props.appData.type == 2){
                    let array = [];
                    if(value.editData.files){
                        let files = JSON.parse(value.editData.files);
                        for(let key in files){
                            array.push({name: files[key].name, url: files[key].xkey,xurl: files[key].xurl})
                        }
                    }
                    state.appForm = {
                        invoice_time: proxy.$filter.dateTime(value.editData.invoice_time),
                        invoice_number: value.editData.invoice_number,
                        files: array,
                    }
                }
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handleSubmit,
                handleClose,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    
</style>